<template>
  <div id="willshake">
    <div v-loading="loading" class="login box">
      <div class="form-content">

        <p class="login-text" style="margin-top:85px">Login</p>
        <el-form class="login-form-style" :rules="Login_Rules" ref="form" :model="form">
          <el-form-item prop="username">
            <el-input @input="change()" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"
                      v-model.number="this.form.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input @input="change()" prefix-icon="el-icon-key" placeholder="请输入密码" type="password"
                      v-model="this.form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-button " type="primary " @click="loginUp('form')">登录</el-button>
          </el-form-item>
        </el-form>

        <div class="link-text">
          <a @click="loginTofindback()">找回密码</a>
          <a @click="loginTosignup()" style="margin-left: 84px;">注册</a>
        </div>

      </div>

    </div>
    <div v-loading="loading" class="signup box">
      <el-page-header @click="signupTologin()"></el-page-header>
      <p class="signup-text">SignUp</p>

      <el-form class="signup-form-style" status-icon style="top:18%" :rules="Sign_Rules" ref="signup_form"
               :model="signup_form">
        <el-form-item prop="region">
          <el-select v-model="this.signup_form.role_type" placeholder="请选择账户类型">
            <el-option label="学生" value="student"></el-option>
            <el-option label="公司" value="company"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="account_number">
          <el-input @input="change_s()" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"
                    v-model.number="this.signup_form.account_number"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input @input="change_s()" autocomplete="off" prefix-icon="el-icon-key" placeholder="请输入密码" type="password"
                    v-model="this.signup_form.password"></el-input>
        </el-form-item>
        <el-form-item prop="re_password">
          <el-input @input="change_s()" autocomplete="off" id="sign_red" prefix-icon="el-icon-key" placeholder="请再输入密码"
                    type="password" v-model="this.signup_form.re_password"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input @input="change_s()" prefix-icon="el-icon-message" placeholder="请输入注册邮箱" type="email"
                    v-model="this.signup_form.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="signup-button" @click="signUp('signup_form')">注册</el-button>
          <el-button type="primary" class="signup-button" @click="signClean()">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div v-loading="loading" class="findback box">
      <el-page-header @click="findbackTologin()"></el-page-header>
      <p class="fb-text">Retrieve password</p>
      <el-form class="signup-form-style" status-icon :rules="Find_Rules" ref="Find_form" :model="Find_form">
        <el-form-item prop="account_number">
          <el-input @input="change_b()" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"
                    v-model.number="this.Find_form.account_number"></el-input>
        </el-form-item>
        <el-form-item prop="register_email">
          <el-input @input="change_b()" prefix-icon="el-icon-message" placeholder="请输入注册时的邮箱" type="email"
                    v-model="this.Find_form.register_email"></el-input>
        </el-form-item>
        <el-form-item prop="Fpassword">
          <el-input @input="change_b()" prefix-icon="el-icon-key" placeholder="输入新的密码" type="password"
                    v-model="this.Find_form.Fpassword"></el-input>
        </el-form-item>
        <el-form-item prop="Fre_password">
          <el-input @input="change_b()" prefix-icon="el-icon-key" placeholder="再输入一次新的密码" type="password"
                    v-model="this.Find_form.Fre_password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="signup-button" type="primary" @click="fbUp('Find_form')">确定</el-button>
          <el-button class="signup-button" type="primary" @click="fbSearch()">检测</el-button>
        </el-form-item>
      </el-form>

    </div>

  </div>


</template>

<script>

import axios from 'axios'

import '../login.css'

export default {
  name: 'LoginForm',

  data () {

    var Check = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 800)
    }
    var validatePass2 = (rule, value, callback) => {

      if (value === '') {
        callback(new Error('请再输入密码'))
      } else if (value !== this.signup_form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }

    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.signup_form.re_password !== '') {
          this.$refs.signup_form.validateField('re_password')
        }
        callback()
      }
    }

    var validatePass4 = (rule, value, callback) => {

      if (value === '') {
        callback(new Error('请再输入密码'))
      } else if (value !== this.Find_form.Fpassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }

    }
    var validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.Find_form.Fre_password !== '') {
          this.$refs.Find_form.validateField('Fre_password')
        }
        callback()
      }
    }
    return {
      noActivated: false,
      loading: false,
      Retr: false,
      form: {
        username: '',
        password: '',
        role: '',
        authority: ''
      },
      Login_Rules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            validator: Check,
            trigger: 'blur'
          }
        ],
        password: [
          {
            validator: validatePass,
            require: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 5,
            message: '长度在 5以上 个字符',
            trigger: 'blur'
          }
        ]
      },
      Sign_Rules: {
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        account_number: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            validator: Check,
            trigger: 'blur'
          }
        ],
        re_password: [
          {
            validator: validatePass2,
            trigger: 'blur'
          }],
        password: [
          {
            validator: validatePass,
            require: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 5,
            message: '长度在 5以上 个字符',
            trigger: 'blur'
          }
        ]
      },
      Find_Rules: {
        account_number: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            validator: Check,
            trigger: 'blur'
          }
        ],
        Fpassword: [
          {
            validator: validatePass3,
            require: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 5,
            message: '长度在 5以上 个字符',
            trigger: 'blur'
          }
        ],
        Fre_password: [
          {
            validator: validatePass4,
            trigger: 'blur'
          }]
        ,

        register_email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ]
      },
      signup_form: {
        account_number: '',
        password: '',
        re_password: '',
        email: '',
        role_type: ''
      },
      Find_form: {
        account_number: '',
        register_email: '',
        Fpassword: '',
        Fre_password: ''
      },
      flag: 0

    }

  },

  methods: {

    loginUp (formName) {

      var comment = { Token: '' }
      var list = []
      var willshake = document.getElementById('willshake')
      this.$refs[formName].validate((valid) => {
        this.loading = true
        if (valid) {
          var _this = this

          axios.post('http://localhost:8080/ToLogin', _this.form)
            .then(function (response) {

              if (response.data.valueOf() !== '账户或密码错误') {

                console.log(_this.$store.getters.get_Token)
                _this.$store.commit('set_Token', response.data)
                _this.loading = false
                localStorage.setItem('username', _this.form.username)
                comment['Token'] = _this.$store.getters.get_Token.token
                list.unshift(comment)
                localStorage.setItem('Token', JSON.stringify(list))
                _this.$router.replace('/Home')
                _this.loading = false
              } else {

                setTimeout(function () {
                  willshake.className = ''
                }, 300)
                willshake.className = 'shake'
                _this.loading = false
              }

            })
            .catch(function (error) {
              console.log(error)
            })
        }
      })

    },
    signUp (formName) {

      var _this = this
      console.log('signup')

      _this.loading = true

      this.$refs[formName].validate((valid) => {
        this.loading = true
        if (valid) {

          axios.post('http://localhost:8080/SignUp', {
              account_number: _this.signup_form.account_number,
              password: _this.signup_form.password,
              register_email: _this.signup_form.email,
              role_type: _this.signup_form.role_type
            }
          )
            .then(function (response) {
              _this.loading = false
              console.log(response.data.result)
              if (response.data.result === 0) {
                alert('注册成功')
                _this.signupTologin()
              } else if (response.data.result === 1) {
                alert('用户名重复')
                _this.signup_form.account_number = ''
              } else if (response.data.result === 2) {
                alert('邮箱重复')
              }
              _this.signup_form.email = ''
            })
            .catch(function (error) {
              console.log(error)
            })
        } else {
          this.loading = false
          setTimeout(function () {
            willshake.className = ''
          }, 300)
          willshake.className = 'shake'
        }
      })

    },
    fbUp (formName) {

      if (this.Retr === false) {
        alert('请先检测')
      } else {
        this.loading = true
        var _this = this

        this.$refs[formName].validate((valid) => {
          this.loading = true
          if (valid) {
            console.log(_this.Find_form.account_number)
            console.log(_this.Find_form.register_email)
            console.log(_this.Find_form.Fpassword)
            axios.post('http://localhost:8080/FindPassword', {
                account_number: _this.Find_form.account_number,
                register_email: _this.Find_form.register_email,
                password: _this.Find_form.Fpassword

              }
            )
              .then(function (response) {
                _this.loading = false
                _this.findbackTologin()

              })
              .catch(function (error) {
                console.log(error)
              })
          } else {
            this.loading = false
            setTimeout(function () {
              willshake.className = ''
            }, 300)
            willshake.className = 'shake'
          }
        })

      }

    },
    fbSearch () {
      var _this = this

      axios.post('http://localhost:8080/FindPassword', {
          account_number: _this.Find_form.account_number,
          register_email: _this.Find_form.register_email,

        }
      )

        .then(function (response) {
          _this.loading = false
          if (response.data.result === 3) {
            alert('账号和邮箱不匹配')

          } else if (response.data.result === 1) {
            alert('账号不存在')
          } else if (response.data.result === 2) {
            alert('账号与邮箱不匹配')
          } else if (response.data.result === 0) {
            alert('账户与邮箱匹配')
            _this.Retr = true
          }

        })
        .catch(function (error) {
          console.log(error)
        })
    },
    signClean () {
      this.signup_form.account_number = '',
        this.signup_form.password = '',
        this.signup_form.re_password = '',
        this.signup_form.role_type = '',
        this.signup_form._email = '',
        this.form.username = '',
        this.form.password = '',
        this.Find_form.Fre_password = '',
        this.Find_form.Fpassword = '',
        this.Find_form.account_number = '',
        this.Find_form.email = '',
        this.Find_form.Fre_password = ''

    },

    change () {
      if (this.form.username === '' && this.form.password === '') {
        this.flag = 0
        var box = document.getElementsByClassName('box2')

        if (box[0].className === 'login box2') {
          box[0].className = 'login box'
        }
        if (box[0].className === 'signup box2') {
          box[0].className = 'signup box'
        }
        if (box[0].className === 'findback box2') {
          box[0].className = 'findback box'
        }

      } else {
        if (this.flag === 0) {
          this.flag = 1
          var box = document.getElementsByClassName('box')

          if (box[0].className === 'login box') {

            box[0].className = 'login box2'
          }
          if (box[0].className === 'signup box') {

            box[0].className = 'signup box2'
          }
          if (box[0].className === 'findback box') {

            box[0].className = 'findback box2'
          }

        }

      }

    },

    change_s () {

      if (this.signup_form.account_number === '' && this.signup_form.password === '' &&
        this.signup_form.re_password === '' && this.signup_form.email === '') {
        this.flag = 0

        var box = document.getElementsByClassName('box2')

        if (box[0].className === 'login box2') {
          box[0].className = 'login box'
        }
        if (box[0].className === 'signup box2') {
          box[0].className = 'signup box'
        }
        if (box[0].className === 'findback box2') {
          box[0].className = 'findback box'
        }

      } else {
        if (this.flag === 0) {
          console.log(1)
          this.flag = 1
          var box = document.getElementsByClassName('box')

          if (box[0].className === 'login box') {

            box[0].className = 'login box2'
          }
          if (box[0].className === 'signup box') {

            box[0].className = 'signup box2'
          }
          if (box[0].className === 'findback box') {

            box[0].className = 'findback box2'
          }

        }

      }

    },
    change_b () {

      if (
        this.Find_form.username === '' && this.Find_form.password === '' &&
        this.Find_form.re_password === '' && this.Find_form.email === '') {
        this.flag = 0
        var box = document.getElementsByClassName('box2')

        if (box[0].className === 'login box2') {
          box[0].className = 'login box'
        }
        if (box[0].className === 'signup box2') {
          box[0].className = 'signup box'
        }
        if (box[0].className === 'findback box2') {
          box[0].className = 'findback box'
        }

      } else {
        if (this.flag === 0) {
          console.log(1)
          this.flag = 1
          var box = document.getElementsByClassName('box')

          if (box[0].className === 'login box') {

            box[0].className = 'login box2'
          }
          if (box[0].className === 'signup box') {

            box[0].className = 'signup box2'
          }
          if (box[0].className === 'findback box') {

            box[0].className = 'findback box2'
          }

        }

      }

    },
    loginTosignup () {
      var login = document.querySelector('.login')
      var signup = document.querySelector('.signup')
      login.style.transform = 'rotateY(-180deg)'
      signup.style.transform = 'rotateY(0deg)'
      this.signClean()
    },
    loginTofindback () {
      var login = document.querySelector('.login')
      var findback = document.querySelector('.findback')
      login.style.transform = 'rotateY(180deg)'
      findback.style.transform = 'rotateY(0deg)'
      this.signClean()
    },
    signupTologin () {
      var login = document.querySelector('.login')
      var signup = document.querySelector('.signup')
      login.style.transform = 'rotateY(0deg)'
      signup.style.transform = 'rotateY(-180deg)'
      this.signClean()
    },
    findbackTologin () {
      var login = document.querySelector('.login')
      var findback = document.querySelector('.findback')
      login.style.transform = 'rotateY(0deg)'
      findback.style.transform = 'rotateY(180deg)'
      this.signClean()
    }
  },

}

</script>

<style>


</style>
